<template>
  <el-card shadow="hover" class="box-card m0Card">
    <el-tabs
      @tab-change="tabChange"
      v-model="activeName"
      class="order-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in props.tableTabs"
        :label="item.title"
        :key="item.key"
        :name="item.name"
      >
        <!-- 纯js表格 每个tab新建新表格 考虑500性能 切换销毁重建 否则存在每个tab大量列表情况 -->
        <!-- 根据ScaleOrder/Merchant菜单+tabName在TableContainer组件区分 -->
        <!-- 销毁无法记录currentPage/pageSize 销毁前记录状态 新建初始化表格 请求=>根据记录渲染 -->

        <TableContainer
          v-if="item.name === activeName"
          :menuType="props.type"
          :tabName="item.key"
        />
      </el-tab-pane>
    </el-tabs>
  </el-card>
  <!-- </div> -->
  <el-affix
    class="or-el-affix"
    position="bottom"
    v-if="!(props.type === 'Merchant' && activeName !== 0)"
    :offset="offset"
  >
    <el-card
      :class="['box-card', 'm-t20', 'ac', { brNone: !offset }]"
      shadow="hover"
    >
      <el-row class="mb-4 ac">
        <el-checkbox
          :label="
            props.type === 'ScaleOrder'
              ? `${checkedArr.length} itens selected`
              : `${checkedArr.length} orders selected`
          "
          size="large"
          :indeterminate="isIndeterminate"
          v-model="isAllChecked.checked"
        />
        <!-- <input type="checkbox" name="" id="" /> -->
        <!-- <div class="acTotal m-r10">
          {{
            props.type === "ScaleOrder"
              ? "44 itens selected"
              : "44 orders selected"
          }}
        </div> -->
        <div v-if="props.type === 'ScaleOrder'" class="acTotal">
          Total: <span class="span">0.00 USD</span>
        </div>
      </el-row>

      <el-row class="mb-4 at" v-if="props.type === 'ScaleOrder'">
        <router-link to="/Order/ScaleOrder/PlaceAnOrder">
          <el-button :disabled="!checkedArr.length" type="default">
            Place an order
          </el-button>
        </router-link>
        <!-- <router-link to="/Order/ScaleOrder/PaymentOrder"> -->
        <router-link to="/Order/ScaleOrder/PlaceAnOrder">
          <el-button type="danger">Place all orders</el-button>
        </router-link>
      </el-row>
      <!-- Merchant bt -->
      <el-row class="mb-4 at" v-if="props.type === 'Merchant'">
        <button class="jsbTb">Change to fulfill by scaleorder</button>
      </el-row>
    </el-card>
  </el-affix>
</template>

<script lang="ts" setup>
import TableContainer from "@/components/TableContainer/index.vue";

import _ from "lodash";
// import $ from "jquery";

import { ref, onMounted, onUnmounted, provide, watch } from "vue";
import type { TabsPaneContext } from "element-plus";

const props = defineProps(["type", "tableTabs"]);
const isIndeterminate = ref(false);
const activeName = ref(0);
const isAllChecked = ref({
  checked: false,
  isAll: true,
});
const checkedArr = ref([]);
console.log(props.type, activeName);

const offset = ref(0);

// let is_running = true;

provide("isAllChecked", isAllChecked);
provide("checkedArr", checkedArr);
console.log(checkedArr);
// 监听全局刷新值
watch(
  () => checkedArr.value,
  () => {
    console.log(checkedArr.value.length, isAllChecked.value.checked);

    if (checkedArr.value.length && !isAllChecked.value.checked) {
      isIndeterminate.value = true;
    }
    if (!checkedArr.value.length || isAllChecked.value.checked) {
      isIndeterminate.value = false;
    }
  }
);

const handleScroll = () => {
  const wrapper = document.getElementsByClassName("main")[0];

  let t = wrapper.scrollTop;
  let h = wrapper.clientHeight;
  let v = wrapper.scrollHeight;

  if (v - (t + h) < 10) {
    offset.value = 50;
  } else {
    offset.value = 0;
  }
};
onMounted(() => {
  const wrapper = document.getElementsByClassName("main")[0];
  wrapper.addEventListener("scroll", _.throttle(handleScroll, 300));
});

//移除监听 组件实例被卸载后调用
onUnmounted(() => {
  const wrapper = document.getElementsByClassName("main")[0];
  console.log(wrapper);

  wrapper.removeEventListener("scroll", handleScroll, false);
});
const tabChange = (e) => {
  console.log(e);
  activeName.value === e;
  isAllChecked.value.checked = false;
  isAllChecked.value.isAll = true;
};

//移除监听 组件实例被卸载后调用
onUnmounted(() => {
  // console.log('onUnmounted');
  const wrapper = document.getElementsByClassName("main")[0];

  wrapper.removeEventListener("click", handleScroll, false);
});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.m0Card {
  margin-bottom: 35px;
}
::v-deep.m0Card .el-card__body {
  padding: 0 !important;
}
::v-deep .el-checkbox__label {
  padding-left: 20px !important;
}
::v-deep .el-affix {
  width: 100% !important;
}
// ::v-deep .el-affix--fixed {
//   transition: all 0.4s ease-in-out;
// }
.brNone {
  border-radius: 0px !important;
}

::v-deep.ac .el-card__body {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.at a {
  margin-right: 10px;
}
.order-tabs ::v-deep .el-tabs__nav-scroll {
  padding: 0 20px;
}
.acTotal {
  margin-left: 10px;
  .span {
    color: #bc1f22;
  }
}
</style>
